<template>
    <div>
        <div class="rp" v-if="!exchange">
            <ul>
                <li>全部</li>
                <li v-for="(l,index) in tag" @click="recommendChange($event,index)">{{l.name}}</li>
            </ul>
        </div>
        <div v-if="exchange">
            <six-first :products_info="message.product_list"></six-first>
        </div>
        <loading v-if="show" class="rp-show"></loading>
    </div>
</template>
<script>
    import SixFirst from './sixfirst.vue'
    import Loading from './loading.vue'
    export default{
        props:['tag'],
        components:{SixFirst,Loading},
        data(){
            return{
                message:{},
                exchange:false,
                show:false
            }
        },
        methods:{
            recommendChange(ev,index){
                $(ev.target).css('color','#0090f2').siblings().css('color','#363636')
                console.log(index)
                var tag=this.tag[index].tag_id
                this.exchange=true
                this.show=true
                this.axios.get('https://app.toursforfun.com/search/multiday-tour/product_list/1.0?page=1&page_size=10&tag='+tag)
                    .then(data=>{
                        this.show=false
                        this.message=data.data.data
                        console.log(this.message.product_list)

                    })
                    .catch(err=>{
                        console.log(err)
                    })
            }
        }
    }
</script>
<style>
    .rp{
        padding-left:24px;
        padding-top:32px;
        margin-bottom:48px;
    }
    .rp ul{
        width:100%;
    }
    .rp li{
        width:50%;
        float: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 36px;
    }
    .rp-show{
        margin-top:calc(50%);
    }
</style>